<template>
	<view class="messagePage myBackground">
		<view class="content">
			<view class="mb15">
				<u-tabs :list="tabList" :current="current" lineColor="#3276FF" lineWidth="25" :activeStyle="{color: '#ffffff'}"
					:inactiveStyle="{color: '#ffffff'}" @change="tabsChange"></u-tabs>
			</view>
			<swiper class="swiper-box" :current="swiperCurrent" @change="transition">
				<swiper-item class="swiper-item">
					<scroll-view scroll-y class="h100p w100p">
						<z-paging ref="paging1" auto v-model="makeDataList1" @query="queryRiskWaitMakePageApp1">
							<view class="mb15 pl15 pr15 boxSizing" v-for="(item,index) in makeDataList1" :key="index">
								<view class="content_item p15 boxSizing">
									<view class="itemName pb15 d-flex a-center j-sb">
										<view class="d-flex a-center">
											<view class="line mr5"></view>
											<view>{{item.deviceName}}</view>
										</view>
										<view class="d-flex a-center" v-if="item.pStatus=='0'">
											<view class="myButton" @click="popupOpen(item)">处理</view>
										</view>
									</view>
									<view class="my_flex_sb mb15">
										<view class="rowName">风险描述:</view>
										<view class="rowValue">{{item.parameterValueName}}</view>
									</view>
									<view class="my_flex_sb mb15">
										<view class="rowName">状态:</view>
										<view class="fs14">
											<view :class="item.pStatus=='0'?'table_color_danger':'table_color_success'">
												{{item.pStatus=='0'?'未处理':'已处理'}}
											</view>
										</view>
									</view>
									<view class="my_flex_sb mb15">
										<view class="rowName">风险后果:</view>
										<view class="rowValue">{{item.res}}</view>
									</view>
									<view class="my_flex_sb mb15">
										<view class="rowName">发生时间:</view>
										<view class="rowValue">{{item.createTime}}</view>
									</view>
									<view class="my_flex_sb mb15" v-if="item.pStatus=='1'">
										<view class="rowName">解决时间:</view>
										<view class="rowValue">{{item.sDate}}</view>
									</view>
								</view>
							</view>
						</z-paging>
						<view style="height: 2rpx;"></view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y class="h100p w100p">
						<z-paging ref="paging2" auto v-model="makeDataList2" @query="queryRiskWaitMakePageApp2">
							<view class="mb15 pl15 pr15 boxSizing" v-for="(item,index) in makeDataList2" :key="index">
								<view class="content_item p15 boxSizing">
									<view class="itemName pb15 d-flex a-center j-sb">
										<view class="d-flex a-center">
											<view class="line mr5"></view>
											<view>{{item.deviceName}}</view>
										</view>
										<view class="d-flex a-center" v-if="item.pStatus=='0'">
											<view class="myButton" @click="popupOpen(item)">处理</view>
										</view>
									</view>
									<view class="my_flex_sb mb15">
										<view class="rowName">风险描述:</view>
										<view class="rowValue">{{item.parameterValueName}}</view>
									</view>
									<view class="my_flex_sb mb15">
										<view class="rowName">状态:</view>
										<view class="fs14">
											<view :class="item.pStatus=='0'?'table_color_danger':'table_color_success'">
												{{item.pStatus=='0'?'未处理':'已处理'}}
											</view>
										</view>
									</view>
									<view class="my_flex_sb mb15">
										<view class="rowName">风险后果:</view>
										<view class="rowValue">{{item.res}}</view>
									</view>
									<view class="my_flex_sb mb15">
										<view class="rowName">发生时间:</view>
										<view class="rowValue">{{item.createTime}}</view>
									</view>
									<view class="my_flex_sb mb15" v-if="item.pStatus=='1'">
										<view class="rowName">解决时间:</view>
										<view class="rowValue">{{item.sDate}}</view>
									</view>
								</view>
							</view>
						</z-paging>
						<view style="height: 2rpx;"></view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y class="h100p w100p">
						<z-paging ref="paging3" auto v-model="makeDataList3" @query="queryRiskWaitMakePageApp3">
							<view class="mb15 pl15 pr15 boxSizing" v-for="(item,index) in makeDataList3" :key="index">
								<view class="content_item p15 boxSizing">
									<view class="itemName pb15 d-flex a-center j-sb">
										<view class="d-flex a-center">
											<view class="line mr5"></view>
											<view>{{item.deviceName}}</view>
										</view>
										<view class="d-flex a-center" v-if="item.pStatus=='0'">
											<view class="myButton" @click="popupOpen(item)">处理</view>
										</view>
									</view>
									<view class="my_flex_sb mb15">
										<view class="rowName">风险描述:</view>
										<view class="rowValue">{{item.parameterValueName}}</view>
									</view>
									<view class="my_flex_sb mb15">
										<view class="rowName">状态:</view>
										<view class="fs14">
											<view :class="item.pStatus=='0'?'table_color_danger':'table_color_success'">
												{{item.pStatus=='0'?'未处理':'已处理'}}
											</view>
										</view>
									</view>
									<view class="my_flex_sb mb15">
										<view class="rowName">风险后果:</view>
										<view class="rowValue">{{item.res}}</view>
									</view>
									<view class="my_flex_sb mb15">
										<view class="rowName">发生时间:</view>
										<view class="rowValue">{{item.createTime}}</view>
									</view>
									<view class="my_flex_sb mb15" v-if="item.pStatus=='1'">
										<view class="rowName">解决时间:</view>
										<view class="rowValue">{{item.sDate}}</view>
									</view>
								</view>
							</view>
						</z-paging>
						<view style="height: 2rpx;"></view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>

		<u-modal :show="modalShow1" :title="modalTitle1" :content='modalContent1' :showConfirmButton="true"
			:showCancelButton="true" @confirm="modalConfirm" @cancel="modalShow1 = false"></u-modal>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		queryRiskWaitMakePageApp,
		overOneRiskApp
	} from "@/api/index.js"

	export default {
		components: {
			
		},
		data() {
			return {
				activeMenu: "",
				swiperCurrent: 0,
				current: 0,
				tabList: [{
					name: '全部'
				}, {
					name: '未处理'
				}, {
					name: '已处理',
				}],

				makeDataList1: [],
				makeDataList2: [],
				makeDataList3: [],

				modalShow1: false,
				modalTitle1: "",
				modalContent1: "",
				dataItem: {}
			};
		},
		onLoad(query) {

		},
		onShow() {

		},
		onReady() {
			// 隐藏导航栏
			uni.hideTabBar({});
		},
		methods: {
			// tabs通知swiper切换
			tabsChange(e) {
				let that = this

				this.current = e.index;
				this.swiperCurrent = e.index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let that = this

				this.current = e.detail.current
				this.swiperCurrent = e.detail.current
			},
			async queryRiskWaitMakePageApp1(pageNo, pageSize) {
				await queryRiskWaitMakePageApp({
					pageIndex: pageNo,
					pageSize: pageSize,
					pStatus: "",
				}).then(res => {
					this.$refs.paging1.complete(res.object.data);
				})
			},
			async queryRiskWaitMakePageApp2(pageNo, pageSize) {
				await queryRiskWaitMakePageApp({
					pageIndex: pageNo,
					pageSize: pageSize,
					pStatus: "0",
				}).then(res => {
					this.$refs.paging2.complete(res.object.data);
				})
			},
			async queryRiskWaitMakePageApp3(pageNo, pageSize) {
				await queryRiskWaitMakePageApp({
					pageIndex: pageNo,
					pageSize: pageSize,
					pStatus: "1",
				}).then(res => {
					this.$refs.paging3.complete(res.object.data);
				})
			},

			// 开关和分闸
			popupOpen(data) {
				this.dataItem = data
				this.modalTitle1 = data.deviceName
				this.modalShow1 = true
			},

			modalConfirm(e) {
				let that = this

				let obj = {
					id: this.dataItem.id,
				}
				that.modalShow1 = false
				overOneRiskApp(obj).then(res => {
					if (res.status == 200) {
						that.$refs.uToast.show({
							type: 'loading',
							title: '正在加载',
							message: "正在加载",
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/loading.png',
							duration: 1000,
							complete() {
								that.$refs.paging1.reload()
								that.$refs.paging2.reload()
								that.$refs.paging3.reload()
								uni.showToast({
									duration: 1000,
									icon: "success",
									title: res.message
								})
							}
						})
					}
				})
			},
		},
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #f5f5f5;
	}

	.z-paging-content {
		top: 0 !important;
	}

	.messagePage {
		height: calc(100vh - var(--window-top));
		width: 100%;

		.content {
			display: flex;
			flex-direction: column;
			height: calc(100% - 20rpx);
			font-family: Source Han Sans CN, Source Han Sans CN-400;

			::v-deep .u-tabs__wrapper__nav[data-v-48634e29] {
				display: flex;
				flex-direction: row;
				position: relative;
				justify-content: space-between;
			}

			//选中蓝色滑块对应
			::v-deep .u-tabs__wrapper__nav__item {
				flex: 1 1 0% !important;
			}

			.swiper-box {
				flex: 1;
			}

			.swiper-item {
				height: 100%;
			}
		}
	}

	.content_item {
		background: #ffffff;
		border-radius: 8px;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
		font-family: "黑体", "Heiti SC", "STHeiti", sans-serif;

		.line {
			width: 12rpx;
			height: 32rpx;
			background: #3276FF;
			border-radius: 3px;
		}

		.itemName {
			font-size: 32upx;
			color: #333333;
			font-weight: 600;
		}

		.rowName {
			font-size: 28upx;
			color: #333333;
		}

		.rowValue {
			font-size: 28upx;
			color: #666666;
		}

		.myButton {
			padding: 5px 10px;
			background: #427aff;
			border-radius: 4px;
			color: #ffffff;
			font-weight: 400 !important;
			font-size: 13px;
		}
	}

	.my_flex_sb:last-child {
		margin-bottom: 0 !important;
	}

	.table_color_success {
		color: #07C160;
	}

	.table_color_danger {
		color: #e30a35;
	}
</style>